<template>
  <div v-title :data-title="title">
    <TableContainer
      v-bind="da"
      @selCX="load"
      @reset="reset"
      @getlist="load"
      @simTopAdd="addClick"
      @simTopRemove="deleteClick"
      @simDetail="detailClick"
      @simEdit="editClick"
      @simRemove="deleteOneClick"
    >
      <template slot="table">
        <el-table-column
          label="是否置顶"
          fixed="right"
          prop="weight"
          align="center"
          :min-width="100"
        >
          <template slot-scope="scope">
            <el-slider
              v-model="scope.row.weight"
              @change="weightChange(scope.row)"
              show-stops
              :format-tooltip="formatTooltip"
              :max="2"
            >
            </el-slider>
          </template>
        </el-table-column>
      </template>
    </TableContainer>
  </div>
</template>

<script>
import TableContainer from "@/components/table/TableContainer.vue";
import { selectArticle, deleteArticle, topArticle } from "@/api/article.js";

export default {
  name: "ArticleCon",
  components: {
    TableContainer,
  },
  computed: {
    title() {
      return "新闻资讯管理 - news-back";
    },
  },
  data() {
    return {
      value1: 1, //滑块值
      da: {
        page: {
          current: 1,
          pageSize: 10,
        },
        TopBtu: [
          {
            type: "primary",
            label: "新建",
            icon: "el-icon-circle-plus",
            incident: "Add",
          },
          {
            type: "danger",
            label: "删除",
            icon: "el-icon-delete-solid",
            incident: "Remove",
          },
        ],
        searchK: [
          { type: "text", label: "文章id", prop: "id" },
          { type: "text", label: "文章简介", prop: "summary" },
          { type: "text", label: "文章标题", prop: "title" },
          { type: "text", label: "文章作者", prop: "account" },
          { type: "text", label: "文章内容", prop: "content" },
          { type: "text", label: "文章类型", prop: "categoryName" },
        ],
        tableProp: [
          { prop: "id", name: "文章id", width: "200" },
          { prop: "title", name: "文章标题", width: "200" },
          { prop: "summary", name: "文章简介", width: "250" },
          { prop: "commentCounts", name: "文章评论数", width: "120" },
          { prop: "viewCounts", name: "文章观看数", width: "120" },
          // { prop: "weight", name: "是否置顶", width: "120" },
          {
            prop: "createDate",
            name: "创建时间",
            width: "200",
            formatter: this.formatter,
          },
          { prop: "preimg", name: "文章预览图", width: "150" },
          { prop: "goodCounts", name: "点赞数", width: "100" },
          { prop: "collectCounts", name: "收藏数", width: "100" },
          { prop: "content", name: "文章内容", width: "250" },
          { prop: "categoryName", name: "文章类型", width: "120" },
          { prop: "tagName", name: "文章标签", width: "200" },
          { prop: "account", name: "作者", width: "100" },
        ],
        tableData: [],
        tabletotal: 0,
        tableConfig: {
          pagin: true, //是否分页
          selection: true, // 选择框
          index: true, // 序号
          border: true, // 边框
          handle: true, // 是否显示操作列
          handleWidth: "",
          buttonType: "", // buttonType='scope'：使用插槽 slot='table-column-handle' 其他使用buttonAffairs 且如果 button 显示按钮 其他类型显示文字按钮
          buttonAffairs: [
            {
              name: "详情",
              icon: "el-icon-plus",
              type: "primary",
              affairs: "Detail",
            },
            {
              name: "编辑",
              icon: "el-icon-plus",
              type: "primary",
              affairs: "Edit",
            },
            {
              name: "删除",
              icon: "el-icon-delete",
              type: "danger",
              affairs: "Remove",
            },
          ],
        },
      },
    };
  },
  mounted() {
    this.load({});
  },
  methods: {
    formatter(row, column, cellValue, index) {
      if (column.property == "createDate") {
        let date = new Date(parseInt(cellValue));
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
      }
    },
    formatTooltip(val) {
      if (val == 0) {
        return (val = "不置顶");
      }
      if (val == 1) {
        return (val = "置顶左侧轮播图");
      }
      if (val == 2) {
        return (val = "置顶顶部轮播图");
      }
    },
    format(resp) {
      for (let i of resp) {
        i.tagName = i.tags
          .map((item) => {
            return item.tagName;
          })
          .join(",");

        i.preimg = i.preimg.split(",")[0];
      }
    },
    load(searchform) {
      selectArticle(searchform)
        .then((res) => {
          console.log(res);
          this.format(res.data.records);
          this.da.tableData = res.data.records;
          this.da.tabletotal = res.data.total;
          this.da.page.current = res.data.current;
          this.da.page.pageSize = res.data.size;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    reset() {
      this.load({});
    },
    weightChange(val) {
      topArticle({
        id: val.id,
        weight: val.weight,
      })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              showClose: true,
              message: "置顶修改成功",
              type: "success",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    addClick() {
      this.$router.push({ path: "/publish" });
    },
    detailClick(row) {
      this.$store.commit("SET_MARK", row);
      this.$store.commit("SET_DEFAULTOPEN", "preview");
      this.$router.push({ path: `/publish/${row.id}` });
    },
    editClick(row) {
      this.$store.commit("SET_MARK", row);
      this.$router.push({ path: `/publish/${row.id}` });
    },
    deleteClick(data) {
      if (data.length === 0) {
        this.$message({
          showClose: true,
          message: "请选择要删除的文章",
          type: "error",
        });
      } else {
        this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            data.forEach((element) => {
              deleteArticle(element.id)
                .then((res) => {})
                .catch((err) => {
                  console.log(err);
                });
            });
            this.load({});
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    deleteOneClick(data) {
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteArticle(data.id)
            .then((res) => {
              if (res.success) {
                this.$message({
                  showClose: true,
                  message: "删除文章成功",
                  type: "success",
                });
              } else {
                this.$message({
                  showClose: true,
                  message: "删除文章失败",
                  type: "error",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
          this.load({});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style>
</style>